<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>完成巡查</title>
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
  <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../../css/globle.css" />
  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="../../css/common.css" />

  <style>
    span {
      margin: 10px;
    }

    .Tabl {
      height: 50px;
      width: 88%;
      font-size: 14px;
      font-weight: bold;
      text-align: left;
      margin-left: 6%;
    }

    .Td1 {
      color: #B8B8B8;
      width: 70px;
    }

    .Td2 {
      color: #000000;
      text-align: right;
      width: 80px;
    }

    .Hr {
      height: 1px;
      width: 96%;
      background-color: #faf7f7;
      margin-left: 2%;
    }

    .Butt {
      border: 1px solid #B8B8B8;
      border-radius: 20px;
      color: #ffffff;
      height: 17px;
      width: 17px;
      outline: none;
    }

    .TabImg {
      height: 150px;
      width: 96%;
      margin-left: 2%;
      border: 10px solid #d8d8d8;
    }

    .TdImg1 {
      height: 110px;
      width: 90px;
    }

    .TdImg2 {
      height: 110px;
      width: 90px;
    }

    .ButAdd {
      height: 110px;
      width: 100px;
      font-size: 100px;
      color: #ffffff;
      background-color: #b8b8b8;
    }

    .TabL {
      height: 75px;
      width: 88%;
      font-size: 16px;
      font-weight: bold;
      text-align: left;
      margin-left: 6%;
    }

    .ButL {
      height: 40px;
      width: 100%;
      background-color: #d0d0d0;
      position: fixed;
      bottom: 0;
    }

    .Td3 {
      background-color: #1abc9c;
      text-align: center;
      width: 50%;
    }

    select {
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      border: none;
      background: none;
    }
  </style>
</head>

<body>
  <button style="background-color: #F2F2F2;height: 40px;width: 100%;font-size: 18px;">发布任务区域</button>
  <input type="hidden" id="ids" />
  <table class="Tabl">
    <tr>
      <td class="Td1">巡查名称：</td>
      <td class="Td2">
        <input value="" id="source" disabled="disabled" />
      </td>
    </tr>
  </table>
  <hr class="Hr" />
  <table class="Tabl">
    <tr>
      <td class="Td1">问题情况：</td>
      <td class="Td2">
        <input value="" id="situation" disabled="disabled" />
      </td>
    </tr>
  </table>
  <hr class="Hr" />
  <table class="Tabl">
    <tr>
      <td class="Td1">标段名称：</td>
      <td class="Td2">
        <input value="" id="departProjectid" disabled="disabled" />
      </td>
    </tr>
  </table>
  <hr class="Hr" />
  <table class="Tabl">
    <tr>
      <td class="Td1">绿地名称：</td>
      <td class="Td2">
        <input value="" id="greenBeltName" disabled="disabled" />
      </td>
    </tr>
  </table>
  <hr class="Hr" />
  <table class="Tabl">
    <tr>
      <td class="Td1">接收方：</td>
      <td class="Td2">
        <input value="" id="receiver" disabled="disabled" />
      </td>
    </tr>
  </table>

  <hr class="Hr" />
  <table class="Tabl">
    <tr>
      <td class="Td1">截止时间：</td>
      <td class="Td2">
        <input type="" value="" id="completeTime" disabled="disabled" />
      </td>
    </tr>
  </table>

  <hr class="Hr" />
  <table class="Tabl">
    <tr>
      <td class="Td1">发布时间：</td>
      <td class="Td2">
        <input type="" value="" id="publishTime" disabled="disabled" />
      </td>
    </tr>
  </table>

  <hr class="Hr" />
  <table class="Tabl">
    <tr>
      <td class="Td1">补充信息：</td>
    </tr>
  </table>
  <table class="TabL">
    <tr>
      <td>
        <textarea rows="3" cols="35" id="remark" placeholder="" disabled="disabled"></textarea>
      </td>
    </tr>
  </table>
  <hr class="Hr" />
  <div style="padding: 10px;">
    <div id="imgBox1"></div>
  </div>
  <button style="background-color: #F2F2F2;height: 40px;width: 100%;font-size: 18px;">执行任务区域</button>
  <table class="Tabl">
    <tr>
      <td class="Td1">施工说明：</td>
    </tr>
  </table>
  <!-- <hr class="Hr" /> -->
  <table class="TabL">
    <tr>
      <td>
        <textarea rows="3" cols="35" id="caption" placeholder="" disabled="disabled"></textarea>
      </td>
    </tr>
  </table>

  <hr class="Hr" />
  <div style="padding: 10px;">
    <div id="imgBox2"></div>
  </div>
  <div style="
        width: 80%;
        position: absolute;
        left: 10%;
        right: 10;
        top: 60%;
        z-index: 1000000;
        text-align: center;
      " id="bigImage"></div>
  <div style="
        width: 80%;
        position: absolute;
        left: 10%;
        right: 10;
        top: 120%;
        z-index: 1000000;
        text-align: center;
      " id="bigImage1"></div>
</body>
<script type="text/javascript" src="../../script/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script src="../../script/webuploader.js"></script>
<script src="../../script/diyUpload.js"></script>
<script src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>

<script type="text/javascript">
  apiready = function () {
    var goodsdId = api.pageParam.typeId;
    var sid = goodsdId;
    //alert(sid);
    $.ajax({
      type: "post",
      async: false, //同步执行
      url: BaseServiceUrl + "mobile/admin/findPatrolOne.json",
      data: {
        pid: sid,
      },
      dataType: "json", //返回数据形式为json
      success: function (result) {
        var datas = result.obj;
        $("#source").val(datas.source);
        $("#situation").val(datas.situation);
        $("#greenBeltName").val(datas.greenName);
        $("#departProjectid").val(datas.areaName);
        $("#publishTime").val(datas.publishTime);
        $("#receiver").val(datas.receiver);
        $("#remark").val(datas.remark);
        $("#ids").val(datas.id);
        $("#caption").val(datas.caption);
        var date = new Date(datas.completeTime); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D =
          date.getDate() < 10
            ? "0" + date.getDate() + " "
            : date.getDate() + " ";
        var h =
          date.getHours() < 10
            ? "0" + date.getHours() + ":"
            : date.getHours() + ":";
        var m =
          date.getMinutes() < 10
            ? "0" + date.getMinutes() + ":"
            : date.getMinutes() + ":";
        var s =
          date.getSeconds() < 10
            ? "0" + date.getSeconds()
            : date.getSeconds();
        var sss = Y + M + D + h + m + s;
        $("#completeTime").val(sss);
      },
    });
    //上传图片
    var $tgaUpload = $("#goodsUpload").diyUpload({
      url: "/uploadFilePath",
      success: function (data) { },
      error: function (err) { },
      buttonText: "",
      accept: {
        title: "Images",
        extensions: "gif,jpg,jpeg,bmp,png",
      },
      thumb: {
        width: 120,
        height: 90,
        quality: 100,
        allowMagnify: true,
        crop: true,
        type: "image/jpeg",
      },
    });

    var id = goodsdId;
    // alert(id);
    $.ajax({
      type: "post",
      async: false, //同步执行
      url: BaseServiceUrl + "mobile/admin/viewAndImage.json",
      data: {
        id: id,
      },
      dataType: "json", //返回数据形式为json
      success: function (result) {
        // console.log(JSON.stringify(result));
        for (var i = 0; i < result.obj.length; i++) {
          $("#imgBox1").append(
            '<div style="margin-left:5px;float:left;margin-top:5px;"><img width="100" height="100"onclick=\'showBig(this)\'  src="' +
            serverImage +
            result.obj[i].image +
            '"\/><\/div>'
          );
        }
      },
    });
    var id = goodsdId;
    // alert(id);
    $.ajax({
      type: "post",
      async: false, //同步执行
      url: BaseServiceUrl + "mobile/admin/viewAndConImage.json",
      data: {
        id: id,
      },
      dataType: "json", //返回数据形式为json
      success: function (result) {
        // alert(JSON.stringify(result));
        for (var i = 0; i < result.obj.length; i++) {
          $("#imgBox2").append(
            '<div style="margin-left:5px;float:left;margin-top:5px;"><img width="100" height="100"onclick=\'showBig1(this)\'  src="' +
            serverImage +
            result.obj[i].completeImage +
            '"\/><\/div>'
          );
        }
      },
    });
  };

  function showBig(t) {
    document.getElementById("bigImage").innerHTML =
      "<img src='" +
      t.src +
      "' onclick='closeBig(this)'  width='100%' style='border:3px solid #4f4f4f;'/>";
  }
  function closeBig(t) {
    document.getElementById("bigImage").innerHTML = "";
  }

  function showBig1(t) {
    document.getElementById("bigImage1").innerHTML =
      "<img src='" +
      t.src +
      "' onclick='closeBig1(this)'  width='100%' style='border:3px solid #4f4f4f;'/>";
  }
  function closeBig1(t) {
    document.getElementById("bigImage1").innerHTML = "";
  }
</script>

</html>